import React, { useState, useEffect } from 'react'
import {View, Text, Image, Checkbox, CheckboxGroup} from '@tarojs/components'

// 购物车组件
import MyShopCart from '../../components/myshopcart'
// 引入全局数据
import store from '../../store'

import './index.scss'
import {logger} from "redux-logger/src";
function Shopping () {
  let [myLikeList, useMyLikeList] = useState(store.getState().likeList)
  let [myCartNum, useMyCartNum] = useState(store.getState().cartNum)
  const [ orderInfo,setorderInfo ] = useState({
    isSelectAll: 1, //是否全选
    goodsNum: 1,   // 商品总数量
    totalAmount: 888 // 商品总金额
  })

  useEffect(() => {
    // 监听store中的数据变化
    store.subscribe(changeLikeList)
  }, [])
  // 是否全选
  function isSeleteAll(e){
    if(e.detail.value[0]) {
      console.log('全选')
    }else{
      console.log('取消全选')
    }
  }
  // 数据改变后重新赋值
  function changeLikeList () {
    useMyLikeList(store.getState().likeList)
  }
  return (
    <View className='shopping'>
      {/* 购物车区域 */}
      <MyShopCart myCartNum={myCartNum} />
      {/*底部支付*/}
      <View className='pay_btn'>
        <View className='btn_fl'>
          <CheckboxGroup onChange={(e) => isSeleteAll(e)}>
            <Checkbox value='true'>全选</Checkbox>
          </CheckboxGroup>

        </View>
        <View className='total_Price'>
          <Text style={{color:'#6e6e6e', fontSize:'18px'}}>合计</Text>
          ￥{orderInfo.totalAmount}
        </View>
        <View className='btn_fr' onClick={() => paymentOrder()}>
          <Text>结算</Text>
        </View>
      </View>
    </View>
  )
}

export default Shopping
